import React, { useState } from 'react';
import { axconst } from '@/shared/axconst';
import Search from './components/search';
import Record from './components/record';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';

const Index: React.FC<any> = props => {
    const [recordVisible, setRecordVisible] = useState(false);

    /** 配置列 */
    const columns = [
        {
            title: '物资名称',
            dataIndex: 'material',
            width: axconst.width.material,
        },
        {
            title: '物资编码',
            dataIndex: 'materialCode',
            width: axconst.width.materialCode,
        },
        {
            title: 'CAS名称',
            dataIndex: 'cas',
            width: axconst.width.cas,
        },
        {
            title: 'CAS编码',
            dataIndex: 'casCode',
            width: axconst.width.casCode,
        },
        {
            title: '当前量',
            dataIndex: 'currentCount',
            width: axconst.width.fouronly,
        },
        {
            title: '使用量',
            dataIndex: 'useCount',
            width: axconst.width.fouronly,
        },
        {
            title: '是否在库',
            dataIndex: 'isIn',
            width: axconst.width.fouronly,
        },
        {
            title: '性状',
            dataIndex: 'character',
            width: axconst.width.fouronly,
        },
        {
            title: '单位',
            dataIndex: 'unit',
            width: axconst.width.fouronly,
        },
        {
            title: '保质期',
            dataIndex: 'period',
            width: axconst.width.times,
        },
        {
            title: '操作',
            width: axconst.width.operate8,
            render: (value: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '使用记录',
                            onClick: () => setRecordVisible(true),
                        },
                    ]}
                />
            ),
        },
    ];

    const recordProps = {
        visible: recordVisible,
        handleVisible: setRecordVisible,
    }

    return (
        <>
            <AxStandardWideList
                columns={columns}
                data={{...axconst.data}}
                AdvancedSearch={Search}
            />
            {recordVisible && <Record {...recordProps} />}
        </>
    );
};

export default Index;
